import React, { Component} from 'react';
import PropTypes from 'prop-types';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    Button,
    StatusBar
} from 'react-native';

const NAV_BAR_HEIGHT_ADNROID = 50;
const NAV_BAR_HEIGHT_IOS = 44;
const STATUS_BAR_HEIGHT = 20;
const StatusBarShape = {
    backgroundColor: PropTypes.string,
    barStyle: PropTypes.oneOf(['default','light-content', 'dark-content']),
    hidden: PropTypes.bool,
    translucent: PropTypes.bool
}

export default class NavigationBar extends Component {
    static propTypes = {
        style: View.propTypes.style,
        title: PropTypes.string,
        titleView: PropTypes.element,
        hide: PropTypes.bool,
        leftButton: PropTypes.element,
        rightButton: PropTypes.element,
        statusBar: PropTypes.shape(StatusBarShape),
        dropDownSelect: PropTypes.element
    }
    
    static defaultProps = {
        statusBar: {
            barStyle: 'light-content',
            hidden: false,
            translucent: true
        }
    }

    constructor(props){
        super(props);
        this.state = {
            title: '',
            hide: false
        }
    }

    render() {
        let status = <View style={[styles.statusBar,this.props.statusBar]}>
                <StatusBar {...this.props.statusBar}/>
            </View>
        let titleView = this.props.titleView ? this.props.titleView :
            <Text style={styles.title}>{this.props.title}</Text>
        let dropDownSelectView = this.props.dropDownSelect ? this.props.dropDownSelect : null;
        let content = <View style={styles.navBar}>
            {this.props.leftButton}
            <View style={styles.titleViewContainer}>
                {titleView}
                {dropDownSelectView}
            </View>
            <View style={styles.rightButton}>
                {this.props.rightButton}
            </View>
        </View>
        return (
            <View style={[styles.container, this.props.style]}>
                {status}
                {content}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'gray'
    },
    navBar: {
        justifyContent: 'space-between', //这个是左靠左，右靠右
        alignItems: 'center',
        height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ADNROID,
        flexDirection: 'row'
    },
    titleViewContainer: {
        flexDirection: 'row',
        justifyContent: 'center', //分配空间
        alignItems: 'center',  //对齐方式
        position: "absolute",
        left: 40,
        right: 40,
        top: 0,
        bottom: 0
    },
    rightButton: {
        position: "absolute",
        right:0
    },
    title: {
        fontSize: 20,
        color: 'white'
    },
    statusBar: {
        height: Platform.OS === 'ios' ? StatusBar.currentHeight : 0,
    }
})